import React, { Component } from 'react';
import { connect } from 'dva';
import {  Tooltip } from 'antd';
import classNames from 'classnames';
import styles from './index.less';

@connect(({ customerView }) => ({
  customerView
}))
class VoucherItem extends Component {
  state = {};

  onClick = (key) => {
    const { dispatch } = this.props;

    // 获取url中的customerId
    const parttern = /\d+/g;
    const str = window.location.href;
    const arr = [];
    let numArray = [];
    let item = '';
    while((item = parttern.exec(str)) !== null){
      arr.push(item[0]);
    }
    numArray = arr.map((value) => {
      return Number(value);
    });
    const customerId = numArray[numArray.length - 1];
    if(key.imgIndex === '1'){
      dispatch({
        type: 'customerView/pathToBooking',
        payload: {
          customerId
        },
      });
    }
  };

  render() {
    const { imgItem, numItem, typeItem, imgBg, imgIndex } = this.props;
    const bgGroup = classNames({
      [styles.picImg]: true,
      [imgBg]: true,
    });
    return (
      <div className={styles.voucherItem}>
        <span className={bgGroup} onClick={() => {this.onClick({imgIndex})}}>
          <Tooltip
            title={typeItem}
            placement="top"
            overlayStyle={{ fontSize: '12px' }}
          >
            <i
              className={`iconfont ${imgItem}`}
              style={{
                width: '20px',
                height: '46px',
                color: '#fff',
                fontSize: '20px',
                lineHeight: '45px',
              }}
            />
          </Tooltip>
        </span>
        <div style={{ display: 'inline-block', verticalAlign: 'middle',position:'relative',top:'-3px'}}>
          <span className={styles.num}>{numItem}</span>
          <span className={styles.type}>{typeItem}</span>
        </div>
      </div>
    );
  }
}
export default VoucherItem;
